<!DOCTYPE html>
<html>
	<head>
		<title>Task@Hand</title>
		<link href="taskAtHand.css" rel="StyleSheet" />
		<script src="lib/jquery-1.8.1.min.js"></script>
		<script src="taskAtHand.js"></script>
	</head>
	<body>
		<div id="app">
			<header>Task@Hand</header>
			<div id="main">
				<div id="add-task">
					<label for="new-task-name">Add a task</label>
					<input type="text" id="new-task-name" title="Enter a task name" placeholder="Please enter a task name" />
				</div>
				<ul id="task-list">
				</ul>
			</div>
			<footer>
			</footer>
		</div>
		<div id="templates" class="hidden">
			<ul id="task-template">
				<li class="task">
					<div class="tools">
						<button class="delete" title="Delete">X</button>
						<button class="move-up" title="Up">^</button>
						<button class="move-down" title="Down">v</button>
					</div>
					<span class="task-name"></span>
					<input type="text" class="task-name hidden" />
				</li>
			</ul>
		</div>
	</body>
</html>